<template>
	<view>
		<view class="margin-xs u-border padding default" v-for="(item,index) in addressList" :key="index">
			<view class="default-cont" :style="item.isdefault?'display:block':''">
				默
			</view>
			<view class="flex padding-bottom-xs justify-between ">
				<view class="flex align-center">
					<text class="iconfont icon-gouxuan margin-right" :class="checkidx == index?'bg-yellow':''"
						@click='handleAddressSwitch(index)'></text>
					<view class="">
						{{item.username}},{{item.phone}}
						<view class="">
							{{item.city}}
							{{item.region}}
							{{item.detail}}
						</view>
					</view>
				</view>

				<view @click="handleEdit(index)" class="edit margin-bottom-xs">
					<text class="iconfont icon-bianji"></text>
				</view>

			</view>
			<view class="flex justify-around">
				<view class="" v-if='item.isdefault'>
					默认地址
				</view>
				<view class="" v-else @click="AddressDefault(index)">
					设为默认
				</view>

				<u-line length="20" direction='col' color='black'></u-line>
				<view class="" @click="removeAddress(item)">
					删除地址
				</view>
			</view>
		</view>
		<view class="text-center" style="padding-top:  var(--status-bar-height);">
			<button class="cu-btn bg-brown" @click="goAddressDetail">新增地址</button>
		</view>
	</view>
</template>

<script>
	import {
		$post
	} from '../../util/request.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		computed: {

			...mapState({
				addressList: state => state.address.addressList,
				checkidx: state => state.address.checkidx
			})
		},

		methods: {
			...mapMutations({
				// AddressDefault:'address/AddressDefaultMut',
				handleAddressSwitch: 'address/AddressSwitch'
			}),
			goAddressDetail() {
				uni.navigateTo({
					url: 'address-detail'
				})
			},
			AddressDefault(idx) {
				let obj = {
					"request": []
				}
				this.addressList.forEach((item, index) => {
					let bool = idx == index
					console.log(bool);
					obj.request.push({
						"method": "PUT",
						"path": `/1.1/classes/address/${item.objectId}`,
						"body": {
							"isdefault": false
						}
					})
					console.log(obj);
					// obj.request.push(data)
				})
				this.$post('/1.1/batch', obj).then(res => {
					console.log(res);
					this.$store.commit('address/AddressDefaultMut', idx)
				})



			},
			removeAddress(item) {
			// 	let obj = {
			// 		"request": []
			// 	}
				
			// 	console.log(item.objectId);
			
			// 	obj.request.push({
			// 		"method": "DELETE",
			// 		"path": `/1.1/classes/address/${item.objectId}`,
			// 	})
			// 	this.$post('/1.1/batch', obj).then(res => {
			// 		console.log(res);
			// 	})
			console.log(item);
				this.$post('/1.1/batch', {
					"requests": [{
						"method": "DELETE",
						"path": `/1.1/classes/address/${item.objectId}`
					}]
				}).then(res=>{
					this.$store.dispatch('address/Addressinitact',item.userid)
					console.log(res);
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.bg-yellow {
		color: red;
	}

	.default {
		position: relative;
		overflow: hidden;

		.default-cont {
			padding: 40upx 10upx 10upx;
			width: 100upx;
			background-color: #FAE456;
			font-size: 12upx;
			text-align: center;
			position: absolute;
			top: -35upx;
			right: -40upx;
			transform: rotate(45deg);
			display: none;
		}
	}

	.edit {
		width: 80upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;


	}
</style>
